<template>
	<view class="page-wraper">
		<customNav style="padding-top: 20px;" title1="添加联系人" titleColor="#000026" bgColor="white" :backIcon="true" backIconColor="black"></customNav>
		<view class="bkg" >
			<view style="height: 10px;"></view>
			<view class="" style="background-color: white; height:auto;">
				<view class="cell">
					<view class="cell_content">
						<view class="cell_title" style="width: 80px;">
							名称
						</view>
						<view class="cell_right" style="">
							<input v-model="name" type="text" placeholder="请输入名称" placeholder-class="placeholder_text" style="text-align: left; flex:1;">
						</view>
					</view>
					<view class="cell_line"></view>
				</view>
				
				<view class="cell">
					<view class="cell_content">
						<view class="cell_title" style="width: 80px;">
							手机号
						</view>
						<view class="cell_right" style="">
							<input v-model="phone" type="number" placeholder="请输入" placeholder-class="placeholder_text" style="text-align: left; flex:1;">
						</view>
					</view>
					<view class="cell_line"></view>
				</view>
				
				<view class="cell">
					<view class="cell_content">
						<view class="cell_title" style="width: 80px;">
							验证码
						</view>
						<view class="cell_right" style="display: flex; flex-direction: row;">
							<input v-model="code" type="number" placeholder="请输入手机号" placeholder-class="placeholder_text" style="text-align: left; flex:1;">
							<view @click="sendCode()" class="code_btn" :disabled="btnDis"  style="margin-left: 5px; padding-top: 5px;">{{btnText}}</view>
						</view>
						
						
						
					</view>
				</view>
			</view>
			
			<button class="enter_btn center" @click="enter()">
				保存
			</button>
		
		</view>
	</view>
</template>

<script>
	import customNav from "@/components/custom-nav/custom-nav.vue";
	import cssArcBackground from "@/components/cssArcBackground/cssArcBackground.vue";
	import addressSearch from "@/components/addressSearch/addressSearch.vue";
	import {addConnect} from '@/api/secondhandCar.js'
	import {smsCode} from '@/api/login.js'
	
	
	export default {
		components: {
			customNav,
			addressSearch,
			cssArcBackground
		},
		data() {
			return {
				userId: '',
				realName: '',
				cardId: '',
				
				phone: '',
				name: '',
				code: '',
				btnText: '获取验证码',
				btnDis: false,
			}
		},
		onLoad() {
			
			uni.getStorage({
				key: 'login',
				success: (res) => {
					let userInfo = res.data
					this.userId = userInfo.id
				}
			})
		},
		methods: {
			
			enter() {
				let param = {
					"users_id" : this.userId,
					"phone" : this.phone,
					"name" : this.name,
					"code": this.code,
					"type": "7",
				}
				addConnect(param)
				.then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: "添加成功",
							icon: 'none'
						});
						
						clearTimeout(this.timer);  //清除延迟执行
						this.timer = setTimeout(()=>{   //设置延迟执行
						
						uni.navigateBack()
						
						},1000);
					}
				})
			},
			
			// 获取验证码时，验证手机号是否正确，并且验证是否在60s后重新发送
			// 验证码倒计时
			countDown() {
				// 初始化定时器
				let t = null;
				// 倒计时1分钟
				let timer = 60;
				// 按钮禁用
				this.btnDis = true;
				// 计时器清零
				clearInterval(t);
				// 按钮显示时间
				this.btnText = `(${timer}s)`;
				t = setInterval(() => {
					// 当倒计时完时，显示重新发送,按钮开启
					if (timer == 0) {
						clearInterval(t);
						this.btnText = "重新发送";
						this.btnDis = false;
						return;
					}
					// 实现倒计时效果
					timer--;
					this.btnText = `(${timer}s)`;
				}, 1000)
			},
			
			sendCode() {
				//手机号校验
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '请填写正确的手机号码',
						icon: 'none'
					});
					return false;
				}
				
				let parmas = {
					"type": "7", //类型 1：注册 2：登录 3：忘记密码 4：修改密码 5：修改手机号 6：更新手机号 7：报价联系人
					"mobile": this.phone //手机号
				}
							
				smsCode(parmas)
				.then(res => {
							
					if (res.code == 0) {
						uni.showToast({
							title: "验证码已发送",
							icon: 'none'
							// title: res.message
						});						
						this.countDown()										
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				})
				.catch(e => {
					
				})
			},
		}
	}
</script>

<style>
	
	.code_btn {
		width: 70px;
		height: 20px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 0px;
		color: #0E59EA;
		opacity: 1;
		display: flex;
		align-items: center;
	}
	
	.enter_btn {
		position: absolute;
		height: 47px;
		background: #0E59EA;
		left: 24px;
		right: 24px;
		bottom: 50px;
		
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 1;
	}
	
	.license_img {
		margin-left: 30px;
		/* margin-top: 17px; */
		width: 113px;
		height: 91px;
		background: #F4F4F4;
		opacity: 1;
		border-radius: 7px;
	}
	
	.cell_title {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	
	.cell_right {

	}
	
	.cell_line {
		margin-left: 15px;
		margin-right: 15px;
		border: 1px solid #00000004;
	}
	
	.placeholder_text {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	
	.cell {
		display: flex;
		flex-direction: column;
		/* background-color: red; */
	}
	
	.cell_content {
		display: flex;
		flex-direction: row;
		height: 60px;
		align-items: center;
		margin-left: 14px;
		margin-right: 14px;
		/* background-color: red; */
	}
	
	.bkg {
		position: absolute;
		width: 100%;
		height: 90%;
		background-color: #F2F2F2;
	}
	
	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	
</style>